<template>
  <div>
    <el-form size="medium"
             label-position="right"
             label-width="200px">
      <el-form-item :label="labelName"
                    required>
        <el-col>
          <el-upload class="upload"
                     :action="uploadAction"
                     :headers="{ token: getToken() }"
                     :data="{fileName : productName + fileName}"
                     :before-upload="beforeUpload"
                     :limit="1"
                     :on-exceed="handleExceed"
                     :on-success="uploadSuccess"
                     :file-list="fileList">
            <el-button size="small"
                       type="primary">点击上传</el-button>
          </el-upload>
        </el-col>
        <el-col><span>示例</span></el-col>
        <el-col :span="3"
                v-for="(item, key) in exampleLoop"
                :key="key">
          <pic-view :pic-url-list.sync="item.urls"
                    upload-class="short-upload"
                    :pic-name-list.sync="item.names"
                    :upload-data="{ picName: '/product/example' }"
                    :upload-type="false"
                    :group-index="key"
                    :max-size="1"
                    @showImg="showFileImg"
                    @trans="trans"></pic-view>
          <div class="stalker">
            <el-input placeholder="输入名称"
                      size="mini"
                      v-model="item.display"></el-input>
          </div>
        </el-col>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss">
.short-upload div {
  height: 79px;
}
.stalker {
  width: 79px;
}
</style>

<script>
import '@/style/common.scss'
import '@/style/info.scss'
import picView from '@/components/pic-viewer-up'
import vViewer from '@/components/v-viewer'
import { devBaseURL } from '@/utils/http'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'
import { getToken } from '@/utils/auth'

export default {
  data() {
    return {
      uploadAction: devBaseURL + 'sys/supplier/upload'
    }
  },
  created() {
    this.initialized()
  },
  props: {
    labelName: {
      type: String,
      default: '某文件'
    },
    fileName: {
      type: String,
      default: '某文件'
    },
    productName: {
      type: String,
      default: ''
    },
    fileList: {
      type: Array,
      default: () => { return [] }
    },
    filePath: {
      type: String,
      default: null
    },
    exampleLoop: {
      type: Array,
      default: () => { return [{}] }
    }
  },
  components: { picView, vViewer },
  methods: {
    getToken,
    initialized() {
      if (this.exampleLoop.length > 0 && this.exampleLoop.some(a => a.display != null)) {
        this.exampleLoop.push({})
      }
    },
    beforeUpload(file) {
      if (!this.productName) {
        this.$msg._message('请先输入产品名称', 'warning')
        return false
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    uploadSuccess(response) {
      if (response.code === HTTPSUCCESS) {
        this.$msg._message('上传成功', 'success')
        this.$emit('update:filePath', response.data)
      }
    },
    trans(index, flag) {
      if (flag === 'success') {
        this.exampleLoop.push({})
        this.$emit('update:exampleLoop', this.exampleLoop)
      } else if (flag === 'remove') {
        this.exampleLoop.splice(index, 1)
        this.$emit('update:exampleLoop', this.exampleLoop)
      }
    },
    showFileImg(url) {
      this.$emit('show', url)
    }
  }
}
</script>
